<template>
    <div id="myLeftNav">
        <el-menu :router="true" default-active="/home/stuMan" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-menu-item v-for="item in navData" :key="item.id" :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
            <!-- <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">班级管理</span>
            </el-menu-item>
            <el-menu-item index="3">
                <i class="el-icon-document"></i>
                <span slot="title">教师管理</span>
            </el-menu-item>
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span slot="title">通知管理</span>
            </el-menu-item> -->
        </el-menu>
        <!-- <ul>
            <router-link v-for="item in navData" :to="item.path"  :key="item.id">
                <li @click="changeStyle(item.id)" :class="{'active':changeNum === item.id}">
                    {{item.name}}
                </li>
            </router-link>
        </ul> -->
    </div>
</template>

<script>
export default {
    name:'ZuoNav',
    data() {
        return {
            navData:[
                {id:1,icon:'el-icon-location',path:'/home/stuMan',name:'学生管理'},
                {id:2,icon:'el-icon-menu',path:'/home/classMan',name:'班级管理'},
                {id:3,icon:'el-icon-document',path:'/home/techMan',name:'教师管理'}
            ],
            changeNum:1,
        }
    },
    methods: {
        changeStyle(num){
            this.changeNum = num
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    },  
}
</script>

<style lang="less" scoped>
    

    
</style>